<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="always">

        <!-- 面包屑导航 -->
        <!-- v-if="this.$route.query" -->
        <div v-if="isToPath" slot="header" class="clearfix">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ this.$route.query.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <el-row>
          <!-- 搜索表单 -->
          <el-col :span="18">
            <el-form
              ref="form"
              :inline="true"
              :model="form"
              class="demo-form-inline"
            >
              <el-form-item label="目录名称" size="small" prop="directoryName">
                <el-input v-model="form.directoryName" />
              </el-form-item>
              <el-form-item label="状态" size="small" prop="state">
                <el-select v-model="form.state" placeholder="请选择">
                  <el-option
                    v-for="item in status"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item size="small">
                <el-button @click="resetForm('ruleForm')">清除</el-button>
              </el-form-item>
              <el-form-item size="small">
                <el-button type="primary" @click="onSubmit">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>

          <!-- 新增目录按钮 -->
          <el-col :span="6" style="text-align: right">
            <el-button v-if="isToPath" type="text" @click="$router.back()">
              <i class="el-icon-back" />
              <span>返回学科</span>
            </el-button>
            <el-button type="success" size="small" @click="addDirectory">
              <i class="el-icon-edit" />
              <span>新增目录</span>
            </el-button>
          </el-col>
        </el-row>

        <!-- alert 警告框 -->
        <el-alert :closable="false" :title="dResultTip" type="info" show-icon />

        <!-- 表格区域 -->
        <el-table
          :data="directorysData"
          style="width:100%"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        >
          <el-table-column type="index" label="序号" />
          <el-table-column prop="subjectName" label="所属学科" />
          <el-table-column prop="directoryName" label="目录名称" />
          <el-table-column prop="username" label="创建者" />
          <el-table-column prop="addDate" label="创建日期">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}") }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量" />
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state===1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="isUsed(scope.row.id, scope.row.state)"
              >
                <span v-if="scope.row.state===1">禁用</span>
                <span v-else>启用</span>
              </el-button>
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.state===1"
                @click="editDirectory(scope.row)"
              >
                修改
              </el-button>
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.state===1"
                @click="delDirectory(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          :current-page="form.page"
          :page-size="form.pagesize"
          :page-sizes="[5, 10, 20, 50]"
          :total="total"
          layout="prev, pager, next, sizes, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />

        <!-- 弹框 -->
        <el-dialog
          v-if="dialogVisible"
          :title="isEdit? '修改目录' : '新增目录'"
          :visible.sync="dialogVisible"
          width="400px"
        >
          <add-dialog
            :is-edit="isEdit"
            :parent-id="parentId"
            @close="closeFn"
            @update="update"
          />
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list as getDirectorys, changeState, remove } from '@/api/hmmm/directorys'
import addDialog from '../components/directorys-add.vue'
import { status } from '@/api/hmmm/constants'
export default {
  components: {
    addDialog
  },
  data() {
    return {
      form: {
        directoryName: '',
        state: null,
        subjectID: null,
        page: 1,
        pagesize: 10
      },
      total: 0,
      dialogVisible: false,
      directorysData: [],
      isEdit: false,
      parentId: '',
      isToPath: false
    }
  },
  computed: {
    status() {
      return status
    },
    dResultTip() {
      return `共${this.total}条数据`
    }
  },
  created() {
    console.log(this.$route)
    if (this.$route.query.id) {
      this.isToPath = true
      this.form.subjectID = this.$route.query.id
    }
    // 调用获取 directorys 目录方法
    this.getDirectorys()
    // getQuestion()
  },

  methods: {
    // 点击删除
    async delDirectory(id) {
      const confirmRes = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      // 点击取消，给用户提示
      if (confirmRes === 'cancel') return this.$message('取消删除')

      // 点击确定，调用API
      const res = await remove(id)

      // 删除成功，给用户提示，渲染列表
      if (res.status === 200) {
        this.$message.success('操作成功')
      }

      this.getDirectorys()
    },

    closeFn() {
      this.dialogVisible = false
    },

    // 点击修改弹框出现
    async editDirectory(data) {
      this.dialogVisible = true
      this.isEdit = true
      this.parentId = data
    },

    // 新增目录列表更新
    update() {
      this.dialogVisible = false
      this.getDirectorys()
    },

    // 点击新增按钮
    addDirectory() {
      this.dialogVisible = true
      this.isEdit = false
    },

    // 点击禁用/启用按钮
    async isUsed(id, state) {
      let res = null
      if (state) {
        res = await changeState({ id, state: 0 })
      } else {
        res = await changeState({ id, state: 1 })
      }
      if (res.data.success) {
        this.$message.success('操作成功')
      }
      this.getDirectorys()
      // if (state === 1) {
      //   state = 0
      //   const res = await changeState({ id, state })
      //   this.getDirectorys()
      //   if (res.data.success) {
      //     this.$message.success('操作成功')
      //   }
      // } else {
      //   state = 1
      //   const res = await changeState({ id, state })
      //   this.getDirectorys()
      //   if (res.data.success) {
      //     this.$message.success('操作成功')
      //   }
      // }
    },

    // 获取 directorys 目录方法
    async getDirectorys() {
      const res = await getDirectorys(this.form)
      this.directorysData = res.data.items
      this.total = res.data.counts
      // console.log(this.directorysData)
      // console.log(res)
    },

    // 每页显示条数变化时触发
    handleSizeChange(newPagesize) {
      this.form.pagesize = newPagesize
      this.getDirectorys()
    },
    // 页码改变时触发
    handleCurrentChange(newPage) {
      this.form.page = newPage
      this.getDirectorys()
    },

    // 点击搜索
    onSubmit() {
      this.getDirectorys()
    },

    // 重置表单
    resetForm() {
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style scoped>
/deep/ .el-form-item__label {
  width: 80px;
}
.el-alert {
  margin-bottom: 15px;
}
.app-container {
  padding: 10px;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
